<template>
  <div style="padding-top:46px">
    <!-- 顶部导航栏 -->
    <van-nav-bar title="手机号验证" fixed>
      <van-icon name="arrow-left" slot="left" color="#333" />
    </van-nav-bar>
    <p class="content_phone">185****0000</p>
    <div class="content_btn">
      <input type="text" placeholder="请输入验证码" maxlength="6">
      <div class="btn-wrap">
		    <button :class="['get-code', {'disable-click': disabled}]" @click="run">{{tipText}}</button>
	    </div>
    </div>
    <p class="yz">
      <button>验证</button>
    </p>
  </div>
</template>

<script>

export default {
 name:'testphone',
data() {
			return {
				tipText: '发送验证码',
				time: 60,
				disabled: false,
			}
		},
		methods: {
			// 点击获取验证码
			run() {
				if(!this.disabled) {
					this.setDisabled(true);
					this.timer();
				} else {
					return false;
				}
			},
			// 倒计时
			timer() {
				if(this.time > 0) {
					this.tipText = this.time + 's后重新获取';
					this.time--;
					setTimeout(this.timer, 1000);
				} else {
					this.setDisabled(false);
					this.time = 60;
					this.tipText = '重新获取';
				}
			},
			// 设置disable的值
			setDisabled(val) {
				this.disabled = val;
			},
		}
}
</script>
<style lang="less" scoped>
.content_phone{
  text-align: center;
  font-size:32px;
}
  .content_btn{
    display:flex;
    justify-content: space-between;
    padding:0 30px;
    height:90px;
    font-size:32px;
    background: #ffffff;
    align-items: center;
    input{
      border:none;
    }
   
   .btn-wrap {
	
		text-align: center;
	}
	.get-code {
		-webkit-appearance: none;
		border: none;
		outline: none;
		font-size: 30px;
		padding: 5px 10px;
		border-radius: 50px;
    border:1px solid #fbcb82;
    color:#fbcb82;
    background: #ffffff;
		cursor: pointer;
		&.disable-click {
			// cursor: not-allowed;
      background-color: #B4B4B4;
      color: #ffffff;
      border:none;
		}
	}
  }
  .yz{
    margin-left:30px;
    margin-top:50px;
    button{
    width:690px;
    height:90px;
    background-color:#fbcb82;
    border:none;
    border-radius: 50px;
    font-size:32px;
    color:#ffffff;
  }
  }
</style>
